<template>
	<view style="position: relative;">
		<view v-if="type === '2'" class="verify-img-out"
			:style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }">
			<view class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
				<image :src="
            backImgBase ? 'data:image/png;base64,' + backImgBase : defaultImg
          " alt="" style="width:100%;height:100%;display:block" />
				<view v-show="showRefresh" class="verify-refresh" @click="refresh">
					<i class="iconfont icon-refresh" />
				</view>
				<transition name="tips">
					<text v-if="tipWords" class="verify-tips"
						:class="passFalg ? 'suc-bg' : 'err-bg'">{{ tipWords }}</text>
				</transition>
			</view>
		</view>
		<!-- 公共部分 -->
		<view v-if="backImgBase" class="verify-bar-area" :style="{
        width: setSize.imgWidth,
        height: barSize.height,
        'line-height': barSize.height
      }">
			<text class="verify-msg" v-text="text" />
			<view class="verify-left-bar" :style="{
          width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
          height: barSize.height,
          'border-color': leftBarBorderColor,
          transaction: transitionWidth
        }">
				<text class="verify-msg" v-text="finishText" />
				<view class="verify-move-block" :style="{
            width: barSize.height,
            height: barSize.height,
            'background-color': moveBlockBackgroundColor,
            left: moveBlockLeft,
            transition: transitionLeft
          }" @touchstart="start" @mousedown="start">
					<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }" />
					<view v-if="type === '2'" class="verify-sub-block" :style="{
              width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
              height: setSize.imgHeight,
              top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
              'background-size': setSize.imgWidth + ' ' + setSize.imgHeight
            }">
						<image :src="'data:image/png;base64,' + blockBackImgBase" alt=""
							style="width:100%;height:100%;display:block" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script type="text/babel">
	/**
 * VerifySlide
 * @description 滑块
 * */
import { aesEncrypt } from "../utils/ase";
import { resetSize } from "../utils/util";
// import { ajCaptcha, ajCaptchaCheck } from "../../../api/common";
	import {
		getAjcaptcha,
		ajcaptchaCheck
	} from '@/api/api.js';
//  "captchaType":"blockPuzzle",
export default {
  name: "VerifySlide",
  props: {
    captchaType: {
      type: String,
      default: "blockPuzzle"
    },
    type: {
      type: String,
      default: "1"
    },
    // 弹出式pop，固定fixed
    mode: {
      type: String,
      default: "fixed"
    },
    vSpace: {
      type: Number,
      default: 5
    },
    explain: {
      type: String,
      default: "向右滑动完成验证"
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "155px"
        };
      }
    },
    blockSize: {
      type: Object,
      default() {
        return {
          width: "50px",
          height: "50px"
        };
      }
    },
    barSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "40px"
        };
      }
    },
    defaultImg: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      secretKey: "", // 后端返回的加密秘钥 字段
      passFalg: "", // 是否通过的标识
      backImgBase: "", // 验证码背景图片
      blockBackImgBase: "", // 验证滑块的背景图片
      backToken: "", // 后端返回的唯一token值
      startMoveTime: "", // 移动开始的时间
      endMovetime: "", // 移动结束的时间
      tipsBackColor: "", // 提示词的背景颜色
      tipWords: "",
      text: "",
      finishText: "",
      setSize: {
        imgHeight: 0,
        imgWidth: 0,
        barHeight: 0,
        barWidth: 0
      },
      top: 0,
      left: 0,
      moveBlockLeft: undefined,
      leftBarWidth: undefined,
      // 移动中样式
      moveBlockBackgroundColor: undefined,
      leftBarBorderColor: "#ddd",
      iconColor: undefined,
      iconClass: "icon-right",
      status: false, // 鼠标状态
      isEnd: false, // 是够验证完成
      showRefresh: true,
      transitionLeft: "",
      transitionWidth: ""
    };
  },
  computed: {
    barArea() {
      return this.$el.querySelector(".verify-bar-area");
    },
    resetSize() {
      return resetSize;
    }
  },
  watch: {
    // type变化则全面刷新
    type: {
      immediate: true,
      handler() {
        this.init();
      }
    }
  },
  mounted() {
    // 禁止拖拽
    this.$el.onselectstart = function() {
      return false;
    };
    console.log(this.defaultImg);
  },
  methods: {
    init() {
      this.text = this.explain;
      this.getPictrue();
      this.$nextTick(() => {
        const setSize = this.resetSize(this); // 重新设置宽度高度
        for (const key in setSize) {
          this.$set(this.setSize, key, setSize[key]);
        }
        this.$parent.$emit("ready", this);
      });

      var _this = this;

      window.removeEventListener("touchmove", function(e) {
        _this.move(e);
      });
      window.removeEventListener("mousemove", function(e) {
        _this.move(e);
      });

      // 鼠标松开
      window.removeEventListener("touchend", function() {
        _this.end();
      });
      window.removeEventListener("mouseup", function() {
        _this.end();
      });

      window.addEventListener("touchmove", function(e) {
        _this.move(e);
      });
      window.addEventListener("mousemove", function(e) {
        _this.move(e);
      });

      // 鼠标松开
      window.addEventListener("touchend", function() {
        _this.end();
      });
      window.addEventListener("mouseup", function() {
        _this.end();
      });
    },

    // 鼠标按下
    start: function(e) {
			console.log(e)
      e.preventDefault();
      e = e || window.event;
      if (!e.touches.length) {
        // 兼容PC端
        var x = e.clientX;
      } else {
        // 兼容移动端
        var x = e.touches[0].pageX;
      }
      this.startLeft = Math.floor(
        x - this.barArea.getBoundingClientRect().left
      );
      this.startMoveTime = +new Date(); // 开始滑动的时间
      if (this.isEnd == false) {
        this.text = "";
        this.moveBlockBackgroundColor = "#337ab7";
        this.leftBarBorderColor = "#337AB7";
        this.iconColor = "#fff";
        e.stopPropagation();
        this.status = true;
      }
    },
    // 鼠标移动
    move: function(e) {
      e = e || window.event;
      if (this.status && this.isEnd == false) {
        if (!e.touches) {
          // 兼容PC端
          var x = e.clientX;
        } else {
          // 兼容移动端
          var x = e.touches[0].pageX;
        }
        var bar_area_left = this.barArea.getBoundingClientRect().left;
        var move_block_left = x - bar_area_left; // 小方块相对于父元素的left值
        if (
          move_block_left >=
          this.barArea.offsetWidth -
            parseInt(parseInt(this.blockSize.width) / 2) -
            2
        ) {
          move_block_left =
            this.barArea.offsetWidth -
            parseInt(parseInt(this.blockSize.width) / 2) -
            2;
        }
        if (move_block_left <= 0) {
          move_block_left = parseInt(parseInt(this.blockSize.width) / 2);
        }
        // 拖动后小方块的left值
        this.moveBlockLeft = move_block_left - this.startLeft + "px";
        this.leftBarWidth = move_block_left - this.startLeft + "px";
      }
    },

    // 鼠标松开
    end: function() {
      this.endMovetime = +new Date();
      var _this = this;
      // 判断是否重合
      if (this.status && this.isEnd == false) {
        var moveLeftDistance = parseInt(
          (this.moveBlockLeft || "").replace("px", "")
        );
        moveLeftDistance =
          (moveLeftDistance * 310) / parseInt(this.setSize.imgWidth);
					var captchaVerification = this.secretKey ? aesEncrypt(this.backToken + '---' + JSON.stringify({
						x: moveLeftDistance,
						y: 5.0
					}), this.secretKey) : this.backToken + '---' + JSON.stringify({
						x: moveLeftDistance,
						y: 5.0
					})
        const data = {
          captchaType: this.captchaType,
          pointJson: this.secretKey
            ? aesEncrypt(
                JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
                this.secretKey
              )
            : JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
          token: this.backToken
        };
        ajcaptchaCheck(data).then((result) => {
        	let res = result.data
        	this.moveBlockBackgroundColor = '#5cb85c'
        	this.leftBarBorderColor = '#5cb85c'
        	this.iconColor = '#fff'
        	this.iconClass = 'icon-check'
        	this.showRefresh = true
        	this.isEnd = true;
        	setTimeout(() => {
        		if (this.mode == 'pop') {
        			this.$parent.clickShow = false;
        		}
        		this.refresh();
        	}, 1500)
        	this.passFalg = true
        	this.tipWords =
        		`${((this.endMovetime-this.startMoveTime)/1000).toFixed(2)}s验证成功`
        	setTimeout(() => {
        		this.tipWords = ""
        		this.$emit('success', {
        			captchaVerification
        		})
        	}, 1000)
        }).catch(res => {
        	this.moveBlockBackgroundColor = '#d9534f'
        	this.leftBarBorderColor = '#d9534f'
        	this.iconColor = '#fff'
        	this.iconClass = 'icon-close'
        	this.passFalg = false
        	setTimeout(() => {
        		this.refresh();
        	}, 1000);
        	this.$parent.$emit('error', this)
        	this.tipWords = "验证失败"
        	setTimeout(() => {
        		this.tipWords = ""
        	}, 1000)
        })
        this.status = false;
      }
    },

    refresh: function() {
      this.showRefresh = true;
      this.finishText = "";

      this.transitionLeft = "left .3s";
      this.moveBlockLeft = 0;

      this.leftBarWidth = undefined;
      this.transitionWidth = "width .3s";

      this.leftBarBorderColor = "#ddd";
      this.moveBlockBackgroundColor = "#fff";
      this.iconColor = "#000";
      this.iconClass = "icon-right";
      this.isEnd = false;

      this.getPictrue();
      setTimeout(() => {
        this.transitionWidth = "";
        this.transitionLeft = "";
        this.text = this.explain;
      }, 300);
    },
		// 请求背景图片和验证图片
				getPictrue() {
					let data = {
						captchaType: this.captchaType,
						clientUid: uni.getStorageSync('slider'),
						ts: Date.now(), // 现在的时间戳
					}
					getAjcaptcha(data).then((result) => {
						let res = result.data
						this.backImgBase = res.originalImageBase64
						this.blockBackImgBase = res.jigsawImageBase64
						this.backToken = res.token
						this.secretKey = res.secretKey
					}).catch(() => {
						this.backImgBase = null
						this.blockBackImgBase = null
					})
				},
    // 请求背景图片和验证图片
  //   getPictrue() {
  //     console.log("sssss");
  //     const data = {
  //       captchaType: this.captchaType,
  //       clientUid: localStorage.getItem("slider"),
  //       ts: Date.now() // 现在的时间戳
  //     };
  //     console.log(data);
  //     this.$axios
  //       .get(`ajcaptcha`, { params: data })
  //       .then(res => {
  //         this.backImgBase = res.data.originalImageBase64;
  //         this.blockBackImgBase = res.data.jigsawImageBase64;
  //         this.backToken = res.data.token;
  //         this.secretKey = res.data.secretKey;
  //         this.$emit("getSuccess");
  //       })
  //       .catch(err => {
  //         this.tipWords = err.msg;
  //         this.backImgBase = null;
  //         this.blockBackImgBase = null;
  //         this.$emit("getSuccess");
  //       });
		
  //     // ajCaptcha(data)
  //     //   .then(res => {
  //     //     this.backImgBase = res.data.originalImageBase64;
  //     //     this.blockBackImgBase = res.data.jigsawImageBase64;
  //     //     this.backToken = res.data.token;
  //     //     this.secretKey = res.data.secretKey;
  //     //   })
  //     //   .catch(res => {
  //     //     this.tipWords = res.msg;
  //     //     this.backImgBase = null;
  //     //     this.blockBackImgBase = null;
  //     //   });
  //   }
  }
};
</script>
<style scoped>
	.verifybox {
		position: relative;
		box-sizing: border-box;
		border-radius: 2px;
		border: 1px solid #e4e7eb;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, .3);
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.verifybox-top {
		padding: 0 15px;
		height: 50px;
		line-height: 50px;
		text-align: left;
		font-size: 16px;
		color: #45494c;
		border-bottom: 1px solid #e4e7eb;
		box-sizing: border-box;
	}

	.verifybox-bottom {
		/* padding: 15px; */
		box-sizing: border-box;
	}

	.verifybox-close {
		position: absolute;
		top: 13px;
		right: 9px;
		width: 24px;
		height: 24px;
		text-align: center;
		cursor: pointer;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		/* display: none; */
		transition: all .5s;
	}

	.verify-tips {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100%;
		height: 30px;
		background-color: rgb(17, 200, 26, 0.5);
		line-height: 30px;
		color: #fff;
	}

	.suc-bg {
		background-color: rgb(17, 200, 26, 0.5);
		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
	}

	.err-bg {
		background-color: rgba(217, 83, 79, .5);
		filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
	}


	.tips-enter,
	.tips-leave-to {
		bottom: -30px;
	}

	.tips-enter-active,
	.tips-leave-active {
		transition: bottom .5s;
	}

	/* ---------------------------- */
	/*常规验证码*/
	.verify-code {
		font-size: 20px;
		text-align: center;
		cursor: pointer;
		margin-bottom: 5px;
		border: 1px solid #ddd;
	}

	.cerify-code-panel {
		height: 100%;
		overflow: hidden;
	}

	.verify-code-area {
		float: left;
	}

	.verify-input-area {
		float: left;
		width: 60%;
		padding-right: 10px;

	}

	.verify-change-area {
		line-height: 30px;
		float: left;
	}

	.varify-input-code {
		display: inline-block;
		width: 100%;
		height: 25px;
	}

	.verify-change-code {
		color: #337AB7;
		cursor: pointer;
	}

	.verify-btn {
		width: 200px;
		height: 30px;
		background-color: #337AB7;
		color: #FFFFFF;
		border: none;
		margin-top: 10px;
	}


	/*滑动验证码*/
	.verify-bar-area {
		position: relative;
		background: #FFFFFF;
		text-align: center;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		border: 1px solid #ddd;
		-webkit-border-radius: 4px;
	}

	.verify-bar-area .verify-move-block {
		position: absolute;
		top: 0px;
		left: 0;
		background: #fff;
		cursor: pointer;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		box-shadow: 0 0 2px #888888;
		-webkit-border-radius: 1px;
	}

	.verify-bar-area .verify-move-block:hover {
		background-color: #337ab7;
		color: #FFFFFF;
	}

	.verify-bar-area .verify-left-bar {
		position: absolute;
		top: -1px;
		left: -1px;
		background: #f0fff0;
		cursor: pointer;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		border: 1px solid #ddd;
	}

	.verify-img-panel {
		margin: 0;
		-webkit-box-sizing: content-box;
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
		border-radius: 3px;
		position: relative;
	}

	.verify-img-panel .verify-refresh {
		width: 25px;
		height: 25px;
		text-align: center;
		padding: 5px;
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}

	.verify-img-panel .icon-refresh {
		font-size: 20px;
		color: #fff;
	}

	.verify-img-panel .verify-gap {
		background-color: #fff;
		position: relative;
		z-index: 2;
		border: 1px solid #fff;
	}

	.verify-bar-area .verify-move-block .verify-sub-block {
		position: absolute;
		text-align: center;
		z-index: 3;
		/* border: 1px solid #fff; */
	}

	.verify-bar-area .verify-move-block .verify-icon {
		font-size: 18px;
	}

	.verify-bar-area .verify-msg {
		z-index: 3;
	}

	/*字体图标的css*/
	/*@font-face {font-family: "iconfont";*/
	/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
	/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
	/*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
	/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
	/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
	/*}*/

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-check:before {
		content: " ";
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		background-image: url("");
		background-size: contain;
	}

	.icon-close:before {
		content: " ";
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		background-image: url("");
		background-size: contain;
	}

	.icon-right:before {
		content: " ";
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-size: cover;
		z-index: 9999;
		background-image: url("");
		background-size: contain;
	}

	.icon-refresh:before {
		content: " ";
		display: block;
		width: 16px;
		height: 16px;
		position: absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		background-image: url("");
		background-size: contain;
	}
</style>
